<template>
  <div class="strut-div" id="partyStandingChart"></div>
</template>

<script>
import echarts from 'echarts';
import pAgeData from '../../../../static/ht-party-join.json';

var obj ={
  '2012-11及以后':'7年内',
  '2002-11~2012-10' : '7-17年',
  '1979-01~2002-10':'17-40年',
  '1976-11~1978-12':'41-50年',
  '1949-10~1966-04': '50年以上'
}

//处理入党时间
var pAgeLegend = Object.keys(pAgeData);
var pAgeSeries = [];
var pAgeIndicator = [];
pAgeLegend.map(item => {
  pAgeIndicator.push({
    text:obj[item],
    max:10000,
    value:pAgeData[item]
  })
  pAgeSeries.push(pAgeData[item]);
});

export default {
  mounted() {
    var chart = echarts.init(document.getElementById('partyStandingChart'));

    var option = {
      radar: [
        {
          center: ['50%', '50%'],
          radius: '70%',
          startAngle: 18,
          name: {
            // (圆外的标签)雷达图每个指示器名称的配置项。
            formatter: function(params, dataSources) {
              return params + '  ' + dataSources.value + '人';
            },
            width: '20',
            height: '10',
            textStyle: {
              fontSize: 17,
              // color: '#FBCC13',
              color: '#fff'
            }
          },
          nameGap: 15, // 指示器名称和指示器轴的距离。[ default: 15 ]
          splitNumber: 5, // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
          axisLine: {
            // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#FF9600', // 坐标轴线线的颜色。
              width: 1, // 坐标轴线线宽。
              type: 'solid' // 坐标轴线线的类型。
            }
          },
          splitLine: {
            // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#735021', // 分隔线颜色
              width: 2 // 分隔线线宽
            }
          },
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: false,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          indicator: pAgeIndicator
        }
      ],
      series: [
        {
          name: '成绩单',
          type: 'radar',
          itemStyle: {
            // 折线拐点标志的样式。
            normal: {
              // 普通状态时的样式
              lineStyle: {
                width: 1
              },
              opacity: 0.2
            },
            emphasis: {
              // 高亮时的样式
              lineStyle: {
                width: 5
              },
              opacity: 1
            }
          },
          data: [
            {
              value: pAgeSeries,
              symbol: 'circle', // 单个数据标记的图形。
              symbolSize: 5,
              name: '数据',
              label: {
                // 单个拐点文本的样式设置
                normal: {
                  show: false, // 单个拐点文本的样式设置。[ default: false ]
                  position: 'top', // 标签的位置。[ default: top ]
                  distance: 5, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                  color: 'rgba(255,0,0,1)', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                  fontSize: 14, // 文字的字体大小
                  formatter: function(params) {
                    return params.value;
                  }
                }
              },
              itemStyle: {
                // 单个拐点标志的样式设置。
                normal: {
                  borderColor: 'rgba(255,0,0,0.2)', // 拐点的描边颜色。[ default: '#000' ]
                  borderWidth: 0.5 // 拐点的描边宽度，默认不描边。[ default: 0 ]
                }
              },
              lineStyle: {
                // 单项线条样式。
                normal: {
                  opacity: 0.5 // 图形透明度
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.9,
                  color: new echarts.graphic.RadialGradient(0.4, 0.4, 1, [
                    {
                      color: '#FF621F',
                      offset: 0
                    },
                    {
                      color: '#FFD942',
                      offset: 1
                    }
                  ])
                }
              }
            }
          ]
        }
      ]
    };

    chart.setOption(option);
  }
};
</script>

<style></style>
